<script lang="ts" setup>
import { ref } from 'vue';
import Icon from '../Icon/icon.vue';
import type {ButtonProps} from './type'
defineOptions({
    name:'vkButton'
})

withDefaults(defineProps<ButtonProps>(),{
    nativeType:'button',
})

const _ref = ref<HTMLElement>()

defineExpose({
    ref:_ref
})
</script>

<template>
  <button 
    ref="_ref"
    class="vk-button"
    :class="{
        [`vk-button--${type}`]: type,
        [`vk-button--${size}`]: size,
        'is-disabled': disabled,
        'is-plain': plain,
        'is-round': round,
        'is-circle': circle,
        'is-loading': loading,
        'is-icon': icon,
    }"
    :disabled="disabled || loading"
  >
  <Icon icon="spinner" spin v-if="loading" />
  <Icon :icon="icon" v-if="icon" />
    <span>
        <slot></slot>
    </span>
  </button>
</template>

<style scoped>

</style>